<template>
	<view>
		<!-- 默认地址 -->
		<view class="head">
			<view class="address">
				<navigator hover-class="false" class="none" url="address" v-if="!address">
					<i class="iconfont iconshouhuodizhi"></i>
					<text>请选择收货地址</text>
				</navigator>
				<view class="default" v-else>
					<view class="default-left">
						<view class="default-info">{{address.user_name}}<text>{{address.phone}}</text></view>
						<view>{{address.address}}</view>
					</view>
					<navigator hover-class="false" class="default-right" url="address">
						<i class="iconfont iconfanhui"></i>
					</navigator>
				</view>
			</view>
		</view>
		<!-- 购物车列表 -->
		<view style="height: 80upx;"></view>
		<view class="content-list">
			<checkbox-group @change="checkboxChange">
				<view class="item" v-for="(item,index) in goodslist" :key="index">
					<view class="item-check">
						<checkbox :value="''+index" :checked="item.checked" />
					</view>
					<view class="item-img" :style="'background: url('+item.goods_image+') center center; background-size: cover;'"></view>
					<view class="item-text">
						<view class="item-text-title">{{item.goods_name}}</view>
						<text class="item-text-spec">{{item.specs_item.specs_name}}</text>
						<view class="item-text-num">
							<view class="money"><text>{{item.specs_item.score}}</text>积分+￥{{item.specs_item.price}}</view>
							<view class="num">X{{item.specs_item.number}}</view>
						</view>
					</view>
				</view>
			</checkbox-group>
		</view>
		<view style="height: 124upx;"></view>
		<view class="bottom">
			<view class="bottom-left" @click="radioChange">
				<radio value="r1" :checked="is_select" />
				<span>全选</span>
			</view>
			<view class="bottom-right" v-if="isdel">
				<view class="total_count">
					<span class="total-price-black">合计：{{price}}</span>
				</view>
				<view class="pay-btn" @tap="pay" :class="address.unid &&specs_id_arr.length>0? '':'bottom-pay-none'">立即结算</view>
			</view>
			<view class="bottom-right" v-else>
				<view class="del-btn" @click="delgoods">删除</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				market_id: uni.getStorageSync('market_id'), //所属上级ID
				address: {}, //默认收货地址
				goodslist: [], //购物车列表
				isdel: true, //是否显示删除
				is_select: false, //是否开启全选
				specs_id_arr: [], //选中商品ID合集
				goods_id_arr: [], //选中规格ID合集
				price: 0, //选中商品需付总价
				score: 0 //选中商品需付总积分
			}
		},
		onNavigationBarButtonTap() {
			var _this = this;
			_this.isdel = !_this.isdel;
			// #ifdef APP-PLUS
			var webView = _this.$mp.page.$getAppWebview();
			webView.setTitleNViewButtonStyle(0, {
				text: _this.isdel ? '管理' : '完成',
			});
			// #endif
		},
		onShow() {
			this.is_select = false;
			this.defaultFunc();
			this.getArea();
			this.getgoodslist();
		},
		methods: {
			// 查询默认地址
			getArea: function() {
				this.$sapi.apiPost('v1/' + this.market_id + '/mobile/address/infos', {
					default: 1
				}).then(res => {
					if (res.data.code == 200 && res.data.data.length > 0) {
						this.address = res.data.data[0];
					} else {
						this.address = {};
					}
				})
			},
			//获取购物车列表
			getgoodslist: function() {
				this.$sapi.apiPost('v1/' + this.market_id + '/mobile/car/infos', {
					default: 1
				}).then(res => {
					if (res.data.code == 200) {
						var data = res.data.data;
						var arr = [];
						for (let key in data) {
							for (let k in data[key].specs) {
								let obj = {};
								obj['goods_name'] = data[key]['goods_name'];
								obj['goods_image'] = data[key]['goods_image'];
								obj['specs_item'] = data[key].specs[k];
								obj['checked'] = false;
								obj['specs_id'] = k;
								obj['goods_id'] = key;
								arr.push(obj);
							}
						}
						this.goodslist = arr;
					} else {
						this.goodslist = [];
					}
				})
			},
			// 默认方法
			defaultFunc() {
				this.price = 0;
				this.score = 0;
				this.specs_id_arr = [];
				this.goods_id_arr = [];
			},
			// 选择要操作的商品
			checkboxChange: function(e) {
				var values = e.detail.value;
				this.defaultFunc();
				values.forEach((item, key) => {
					this.specs_id_arr.push(this.goodslist[item].specs_id);
					this.goods_id_arr.push(this.goodslist[item].goods_id);
					this.price += Number(this.goodslist[item].specs_item.price * this.goodslist[item].specs_item.number)
					this.score += Number(this.goodslist[item].specs_item.score * this.goodslist[item].specs_item.number)
				})
				if (this.specs_id_arr.length == this.goodslist.length) {
					this.is_select = true;
				} else {
					this.is_select = false;
				}
			},
			// 全选&反全选
			radioChange: function() {
				this.is_select = !this.is_select;
				this.defaultFunc();
				if (this.is_select) {
					this.goodslist.forEach((item, key) => {
						item.checked = true;
						this.specs_id_arr.push(item.specs_id);
						this.goods_id_arr.push(item.goods_id);
						this.price += Number(item.specs_item.price * item.specs_item.number)
						this.score += Number(item.specs_item.score * item.specs_item.number)
					})
				} else {
					this.goodslist.forEach((item, key) => {
						item.checked = false;
					})
				}
			},
			// 删除选中商品
			delgoods: function() {
				this.$sapi.apiPost('v1/' + this.market_id + '/mobile/car/remove', {
					goods_id: this.goods_id_arr,
					specs_id: this.specs_id_arr,
				}).then(res => {
					if (res.data.code == 200) {
						uni.showToast({
							title: '删除成功',
							icon: 'none'
						})
						this.defaultFunc();
						this.getgoodslist();
					} else {
						uni.showToast({
							title: '删除失败',
							icon: 'none'
						})
					}
				});
			},
			// 前往支付
			pay: function() {
				if (this.specs_id_arr.length == 0) {
					uni.showToast({
						title: '请选择商品',
						icon: 'none'
					});
					return
				}
				var data = {
					specs_id: this.specs_id_arr,
					address: this.address.address,
					usr_name: this.address.user_name,
					phone: this.address.phone,
					pay_type: "wxapp"
				}
				uni.navigateTo({
					url: 'checkstand?total=' + this.price + '&score=' + this.score + '&data=' + encodeURIComponent(JSON.stringify(
						data))
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}

	/* 默认地址 */
	.head {
		width: 100%;
		height: 100upx;
		background-color: #FF9900;

		.address {
			position: relative;
			top: 40upx;
			width: 94%;
			min-height: 120upx;
			max-height: 200upx;
			margin: auto;
			background-color: #FFFFFF;
			border-radius: 20upx;

			.none {
				display: flex;
				align-items: center;

				i {
					color: #FF9900;
					font-size: 65upx;
					line-height: 1;
					font-weight: bold;
					margin-left: 36upx;

				}

				text {
					color: #333333;
					font-size: 28upx;
					margin-left: 10upx;
				}
			}

			.default {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 95%;

				.default-left {
					width: 92%;
					padding: 15upx;

					.default-info {
						color: #333333;
						font-size: 30upx;
						display: flex;
						align-items: center;

						text {
							color: #A8A8A8;
							margin-left: 10upx;
						}
					}
				}

				.default-right {
					color: #A8A8A8;
					font-size: 20upx;
					margin-right: 10upx;
				}
			}
		}
	}


	.content-list {
		width: 100%;

		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 200upx;
			background-color: #FFFFFF;
			margin-top: 20upx;
			padding: 0 20upx;
			width: calc(100% - 40upx);

			.item-check {
				display: flex;
				align-items: center;

				checkbox {
					height: 50upx;
					line-height: 50upx;
					transform: scale(0.7);
				}
			}

			.item-img {
				width: 128upx;
				height: 128upx;
				margin-left: 10upx;
				margin-right: 20upx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.item-text {
				width: 100%;

				.item-text-title {
					color: #2D3440;
					font-size: 28upx;
				}

				.item-text-spec {
					width: auto;
					background-color: #DADFE6;
					color: #FFFFFF;
					padding: 5upx 10upx;
					border-radius: 15upx;
				}

				.item-text-num {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.money {
						color: #FF0032;
						font-size: 28upx;

						text {
							font-size: 40upx;
						}
					}

					.num {
						color: #2D3440;
						font-size: 20upx;
					}
				}
			}
		}
	}

	.bottom {
		position: fixed;
		bottom: 0upx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		height: 104upx;
		background: #FFFFFF;

		.bottom-left {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-left: 20upx;
			color: #666666;

			.uni-radio-input:hover {
				border-color: #FF9900 !important;
			}

			.uni-radio-input-checked {
				border: 1px solid #FF9900 !important;
				background: #FF9900 !important;
			}
		}

		.bottom-right {
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.total_count {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-right: 20upx;
				color: #333333;
				font-size: 30upx;
			}

			.pay-btn {
				width: 228upx;
				height: 104upx;
				text-align: center;
				line-height: 104upx;
				background-color: #FFB800;
				color: #FFFFFF;
				font-size: 34upx;
			}

			.bottom-pay-none {
				background-color: #CCCCCC;
			}

			.del-btn {
				width: 120upx;
				height: 60upx;
				line-height: 60upx;
				text-align: center;
				border-radius: 30upx;
				color: #F10000;
				border: 1upx solid #F10000;
				margin-right: 20upx;
			}
		}
	}
</style>
